<template>
  <el-dialog
    v-model="$store.state.HomeModule.dialogFormVisible"
    title="修改户主信息"
  >
    <el-form :model="form">
      <el-form-item label="户主姓名" :label-width="formLabelWidth">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="请输入新的户主信息"
        />
      </el-form-item>
      <el-form-item label="住址" :label-width="formLabelWidth">
        <el-input
          v-model="form.address"
          autocomplete="off"
          placeholder="请输入新的住址"
        />
      </el-form-item>
      <el-form-item label="门牌号" :label-width="formLabelWidth">
        <el-input
          v-model="form.number"
          autocomplete="off"
          placeholder="请输入新的门牌号"
        />
      </el-form-item>
      <el-form-item label="房屋用途" :label-width="formLabelWidth">
        <el-input
          v-model="form.type"
          autocomplete="off"
          placeholder="房屋用途的变更"
        />
      </el-form-item>
      <el-form-item label="户型" :label-width="formLabelWidth">
        <el-input
          v-model="form.typeHome"
          autocomplete="off"
          placeholder="新的户型"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog(0)">放弃更改</el-button>
        <el-button type="primary" @click="closeDialog(1)"> 提交更改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import link from "@/api/link.js"; //引用数据请求
import apiUrl from "@/api/url.js";
let store = useStore();

const closeDialog = (num: number) => {
  store.commit("DIALOG");
  if (num == 1) {
    console.log(store.state.HomeModule.uplistData); //要修改的内容
    console.log(form.name); //要修改成什么
    console.log(form.address); //要修改成什么
    let datas = {
      name: form.name,
      address: form.address,
      number: form.number,
      type: form.type,
      typeHome: form.typeHome,
    };

    link(
      apiUrl.userlist + "/" + store.state.HomeModule.uplistData.id,
      "PUT",
      datas
    ).then((resolve: any) => {
      console.log(resolve);
    });
  }
};
const formLabelWidth = "140px";

const form = reactive({
  name: "",
  address: "",
  number: "",
  type: "",
  typeHome: "",
});
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>

<style scoped lang="scss"></style>
